 // 监听点击事件
 document.body.addEventListener('click', function(e) {
    const x = e.clientX; // 获取点击位置的 x 坐标
    const y = e.clientY; // 获取点击位置的 y 坐标

    // 创建多个粒子（烟花效果）
    for (let i = 0; i < 100; i++) {
      const firework = document.createElement('div');
      firework.classList.add('firework');

      // 设置粒子的随机颜色
      firework.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;

      // 设置粒子的位置
      firework.style.left = `${x - 2.5}px`; // 粒子的起始位置
      firework.style.top = `${y - 2.5}px`;  // 粒子的起始位置

      // 为粒子设置随机的方向和偏移量
      const angle = Math.random() * 360;  // 随机角度
      const distance = Math.random() * 200 + 100;  // 随机距离
      const xOffset = Math.cos(angle) * distance;  // 水平偏移
      const yOffset = Math.sin(angle) * distance;  // 垂直偏移

      // 设置 CSS 变量来控制每个粒子的运动轨迹
      firework.style.setProperty('--x', `${xOffset}px`);
      firework.style.setProperty('--y', `${yOffset}px`);

      // 将粒子元素添加到页面
      document.body.appendChild(firework);

      // 设置定时器，在动画结束后移除粒子
      setTimeout(() => {
        firework.remove();
      }, 1000);  // 动画持续时间1秒
    }
  });